<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
   <title>桌面通知--代办事项</title>
   <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="laydate/laydate.js"></script>
   <link rel="stylesheet" href="style.css">
</head>
<script>
    var TODO ={data:null};
</script>
<body>
    <div class="main">
         <div class="header">
                 <input type="text" id="content" value="" placeholder="todo...">
                 <input  id="time" name="" value="2018-08-22 15:30">
                 <a href="javascript:;" id="add-todo">添加</a>
         </div>
         <div class="todo-item">

         </div>
    </div>

  <script>
  function appenTodoList()
  {
    let data = TODO.data || [];
    let html='';
    data.forEach(function(value,index){
        html +=`  <div class="items" style="position:relative;" >
                  <div class="text">
                       ${value.content}
                  </div>
                  <div class="time">
                       ${value.time}
                  </div>
                  <span class="delete" data-id="${index}" style="position:absolute;right:5px;bottom:5px;user-seleted:none;">删除</span>
          </div>`;
    })
    $('.todo-item').html(html);

  }

function notice(title)
{
   new Notification('我的小主人~~~',{
    body: title,
    icon: 'http://blog.gdfengshuo.com/images/avatar.jpg',
    requireInteraction:true
})
}

 $('#add-todo').click(function functionName() {
       let content = $('#content').val();
       let time = $('#time').val();
       let timeStamp = new Date(time).getTime();
       if( isNaN(timeStamp))
       {
         alert('日期格式错误')
         return false;
       }
       let data = TODO.data || [];
           data.push({
              content:content,
              time:time,
              timeStamp:timeStamp,
              completed:false
           })
       TODO.data = data;
       localStorage.setItem('TODO',JSON.stringify(data));
       appenTodoList();


 });

  //询问用户是否允许卓明通知
  Notification.requestPermission().then(function(permission) {});
  let todo = localStorage.getItem('TODO');
   TODO.data = JSON.parse(todo);
  appenTodoList();

function checkTodo()
{
    let t = Math.floor(  new Date().getTime() / 1000 );
    let data = TODO.data || [];
    let newTodoList=[];
    data.forEach(function(value){
         let t1 =  value.timeStamp  / 1000;
         if( t1 == t)
         {
               notice(value.content+' '+ value.time);
         }else{
           newTodoList.push(value);
         }
    })

    TODO.data = newTodoList;
    localStorage.setItem('TODO',JSON.stringify(newTodoList));
    appenTodoList();
    setTimeout('checkTodo()',1000);

}
checkTodo();


$(document).on('click','.delete',function () {
    let id = $(this).data('id');
    let data = TODO.data || [];
    let newTodoList = [];
    data.forEach(function(value ,index){
        if( index != id){
          newTodoList.push(value);
        }
    })
    TODO.data = newTodoList;
    localStorage.setItem('TODO',JSON.stringify(newTodoList));
})

  </script>
</body>
</html>
